<template>
    <div class="unknownProblem">
        <p class="tips">学习机器人未知的问题，添加问题的时候尽量添加质量比较高的问题，对于质量不高问题，您可以直接忽略。</p>
        <div class="header flexbetween" style="margin-bottom: 20px">
            <el-input placeholder="请输入关键字搜索" v-model="searchInput" @keyup.enter.native="filterList" size="small" style="width: 300px">
                <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
            </el-input>
            <div class="iconBtn">
                <el-tooltip effect="light" content="合并回答" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M70')">
                    <span class="iconfont icon-hebing" @click="doMerge"></span>
                </el-tooltip>
                <el-tooltip effect="light" content="批量忽略" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M73')">
                    <span class="iconfont icon-hulve" @click="batchIgnore"></span>
                </el-tooltip>
                <el-tooltip effect="light" content="导出" placement="top" :enterable="false" class="ml20"
                            v-if="menuAuthCodes.includes('M71')">
                    <span class="iconfont icon-daochu" @click="doExport"></span>
                </el-tooltip>
            </div>
        </div>

        <div class="elementTable isFixed">
            <el-table :data="ukQsList" v-loading="tableLoading" border fit :height="tableHeight" @selection-change="changeSelect"
                      row-key="id" ref="ukQsTable">
                <el-table-column type="selection" width="45"></el-table-column>
                <el-table-column prop="question" label="待处理问题列表"></el-table-column>
                <el-table-column prop="addTime" label="时间"></el-table-column>
                <el-table-column prop="hits" label="触发次数"></el-table-column>
                <el-table-column prop="sourceName" label="渠道"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-tooltip effect="light" content="忽略" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M72')">
                                <span class="iconfont icon-hulve" @click="ignore(scope.row.id)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="回答" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M73')">
                                <span class="iconfont icon-huida" @click="answer(scope.row.question, scope.row.id)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="查看聊天记录" placement="top" :enterable="false">
                                <span class="iconfont icon-chakanliaotianjilu" @click="openChatList(scope)"></span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="changePageSize" @current-change="changePageNo" :current-page="pageNo"
                           :page-sizes="[5, 10, 15, 20, 30, 50 ,100]" :page-size="pageSize" layout="->, sizes, total, prev, pager, next"
                           :total="total" background>
            </el-pagination>
        </div>

        <!-- 回答问题 -->
        <reply-question :replyVisible.sync="replyVisible" :answeringQuestion="answeringQuestion" @getSelectedAnswer="selectedAnswerVal"
                        @finishAnswer="finishAnswer"></reply-question>

        <el-dialog :visible.sync="chatVisible" title="查看聊天记录" width="980px" custom-class="chatListDialog" :before-close="beforeCloseChat">
            <el-tabs v-model="activeName" @tab-click="getChatList">
                <el-tab-pane label="本次" name="nearby"></el-tab-pane>
                <el-tab-pane label="全部" name="allList"></el-tab-pane>
            </el-tabs>
            <chat-list :chatListData="chatListData" ref="chatList"></chat-list>
        </el-dialog>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import exportExcel from "@/components/exportExcel";
import replyQuestion from "@/components/replyQuestion";
import { unknownQsListMethod, ignoreQuestion, answerAnUnQuestion, exportUnQuestion } from "@/api/unknownQuestion.js";
import { getChatListCommon } from "@/api/chatList.js";
import chatList from "@/components/chatList/index.vue";
export default {
    name: "unknownProblem",
    data() {
        return {
            searchInput: "",
            ukQsList: [],
            multipleChoice: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            replyVisible: false,
            answeringQuestion: "",
            answeringId: "",
            chatVisible: false,
            chatListParam: {},
            activeName: "nearby",
            chatListData: [],
            multiAnswer: [],
            multiAnswerFlag: false,
        }
    },
    created() {
        this.getUnknownQuestionList();
    },
    methods: {
        filterList() {
            this.pageNo = 1;
            this.getUnknownQuestionList();
        },
        getUnknownQuestionList() {
            if (!this.menuAuthCodes.includes("M69")) {
                return;
            }
            this.tableLoading = true;
            // 获取未知问题列表
            let param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.searchInput
            }
            unknownQsListMethod(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.ukQsList = data.list || [];
                    this.total = data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        doMerge() {
            //合并回答
            if (this.multipleChoice.length > 0) {
                this.multipleChoice.forEach((item, index) => {
                    this.multiAnswer.push({
                        id: item.id,
                        question: item.question
                    });
                });
                this.multiAnswerFlag = true;
                this.replyVisible = true;
            } else {
                this.$antMessage.warning("请至少选择一个未知问题");
            }
        },
        doExport() {
            let param = {
                keyword: this.searchInput
            };
            this.$refs.exportExcel.showLoading();
            exportUnQuestion(param).then((resp) => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports("未知问题列表", resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        batchIgnore() {
            if (this.multipleChoice.length == 0) {
                return this.$antMessage.warning("请至少选择一个未知问题");
            }
            var ids = [];
            this.multipleChoice.forEach(item => { ids.push(item.id) });
            this.ignore(ids.join(","));
        },
        ignore(iid) {
            this.$confirm("请确认是否忽略?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let param = {
                    ids: iid
                };
                ignoreQuestion(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("忽略成功");
                        this.getUnknownQuestionList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        answer(qs, id) {
            this.answeringQuestion = qs;
            this.answeringId = id;
            this.multiAnswerFlag = false;
            this.replyVisible = true;
        },
        openChatList(obj) {
            // 查看聊天记录
            this.chatListParam = {
                messageHistoryId: obj.row.messageHistoryId,
                sourceId: obj.row.sourceId,
                clientId: obj.row.clientId
            };
            this.chatListData = [];
            this.getChatList();
            this.chatVisible = true;
        },
        getChatList() {
            let listUrl = "/v1/admin/message/getMessageHistoryById";
            let param = {
                messageHistoryId: this.chatListParam.messageHistoryId,
                sourceId: this.chatListParam.sourceId,
                clientId: this.chatListParam.clientId,
            };
            if (this.activeName == "allList") {
                listUrl = "/v1/admin/message/getMessageHistoryList";
                delete param.messageHistoryId;
            }
            getChatListCommon(param, listUrl).then(resp => {
                if (resp.status == 0) {
                    this.chatListData = resp.data;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        selectedAnswerVal(val) {
            // 选中某个问题答案进行回答
            let param = {
                questionId: val,
            }
            if (this.multiAnswerFlag) {
                let mutiList = [];
                this.multiAnswer.forEach((item, index) => {
                    mutiList.push({
                        id: item.id,
                        question: item.question
                    });
                });
                param.objList = mutiList;
            } else {
                param.objList = [{
                    id: this.answeringId,
                    question: this.answeringQuestion
                }];
            }
            answerAnUnQuestion(param).then(resp => {
                if (resp.status == 0) {
                    this.multiAnswerFlag = false;
                    this.$antMessage.success("回答成功");
                    this.replyVisible = false;
                    this.getUnknownQuestionList();
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        finishAnswer() {
            // 回答问题--编辑答案成功后
            let param = {
                ids: this.answeringId
            };
            ignoreQuestion(param).then(resp => {
                if (resp.status == 0) {
                    this.answeringQuestion = "";
                    this.answeringId = "";
                    this.getUnknownQuestionList();
                    this.$antMessage.success("回答成功");
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            this.replyVisible = false;
        },
        changeSelect(val) {
            this.multipleChoice = val;
        },
        beforeCloseChat() {
            this.activeName = "nearby";
            this.chatVisible = false;
        },
        onExportExcelError() {
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getUnknownQuestionList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getUnknownQuestionList();
        },
    },
    computed: {
        tableHeight() {
            return document.body.clientHeight - 280;
        },
    },
    components: {
        elementTable,
        chatList,
        exportExcel,
        replyQuestion
    }
}
</script>

<style lang="scss">
.unknownProblem {
    .tips {
        color: #90979d;
        margin-bottom: 20px;
    }
    .chatListDialog {
        height: 680px;
        .el-dialog__body {
            padding-right: 0;
        }
        .robotChatLog {
            height: calc(100% - 65px);
            overflow-y: scroll;
        }
    }
}
</style>
